<template>
    <a-row>
        <a-row class='mytitle'>
            <!-- <a-icon :component = "file" style="margin:0 .5rem 0 0"/> -->
            {{ $t('File-system') }}
        </a-row>
        <a-row style="margin:1em;">
            <a-card hoverable>
                <a-tabs :defaultActiveKey='defaultActiveKey' @change="tabsChange">
                    <a-tab-pane :tab="$t('Overview')" key='FS_Overview' style="padding: 14px">
                        <!-- v-userAuth="'D10'" -->
                        <NoAuthPage v-showNoAuth="'D10-1'" :imgBoxStyle="{ height: '40vh', margin: '0 10px 10px' }" />
                        <div v-userAuth="'D10-1'" ref="FS_OverviewRef">
                            <p style="color:var(--themeColor);margin-top:0" class="tabs-top">{{ $t('File-system') }}</p>
                            <a-table :columns='fscolumns' :dataSource='fsdata' :loading="loading" size='small'
                                :pagination='pagination' rowKey="id" :locale="defaultSetting">
                                <!-- :rowSelection='{type:"radio",selectedRow:selectedRowKeys,onChange:onSelectChange}'  -->
                                <template slot="enabled" slot-scope='enabled'>
                                    <span :class="enabled == true ? 'green-circle' : 'red-circle'"></span>
                                    {{ enabled == true ? $t('Enable') : $t('Disable') }}
                                    <!-- <a-tag :color="enabled == true?'var(--mainGreenColor)':'var(--mainRedColor)'">{{enabled == true? $t('Enable'):$t('Disable')}}</a-tag> -->
                                </template>
                            </a-table>
                            <Detail style="margin-top:1rem" :tarname='details' :chartdata='charts' @updateData="updateData">
                            </Detail>
                        </div>
                    </a-tab-pane>
                    <!-- <Snap></Snap> -->
                    <!-- <a-tab-pane :tab="$t('Storage-management')" key='1'>
                        <Directory1 v-if="currentTabKey=='1'"></Directory1>
                    </a-tab-pane> -->
                    <a-tab-pane :tab="$t('文件目录')" key='FS_Directory'>
                        <!-- <Directory @to-share="handleShare" /> -->
                        <Tree ref="FS_DirectoryRef" @to-share="handleShare" />
                    </a-tab-pane>
                    <a-tab-pane :tab="$t('文件用户')" key='FS_User'>
                        <User ref="FS_UserRef" />
                    </a-tab-pane>
                    <a-tab-pane :tab="$t('文件共享')" key='FS_Share'>
                        <Share ref="FS_ShareRef" v-if="currentTabKey == 'FS_Share'" />
                    </a-tab-pane>
                    <a-tab-pane :tab="$t('配额管理')" key='FS_Quota' style="padding: 14px">
                        <Quota ref="FS_QuotaRef" />
                    </a-tab-pane>
                </a-tabs>
            </a-card>
        </a-row>
    </a-row>
</template>
<script>
import Topbar from '../../../components/common/Topbar'
import Menubar from '../../../components/common/Menubar'
import Detail from '../../../components/storage_mgr/filesystem/detail'
import Directory1 from '../../../components/storage_mgr/filesystem/storage/directory'
// import Snap from '../../../components/storage_mgr/filesystem/storage/snap'
// import file from '../../../../static/images/svg/ic_filesystem03.svg'
import EmptyData from '@/components/common/EmptyData'
import NoAuthPage from '@/components/common/NoAuthPage'
import Directory from './directory/index.vue'
import User from './user/index.vue'
import Share from './share/index.vue'
import Quota from './quota/index.vue'
import Tree from './directory/tree.vue'

import request from '@/request/request'

export default {
    name: 'fsview',
    // template: '<a-icon :component = "file" />',
    components: { Topbar, Menubar, Detail, Directory, EmptyData, NoAuthPage, User, Directory1, Share, Quota, Tree },
    // components:{Topbar,Menubar,Detail,Directory,Snap},
    data() {
        return {
            // file,
            fscolumns: [
                { title: this.$t('File') + this.$t('Name'), dataIndex: 'name', key: 'name', ellipsis: true, sorter: (a, b) => a.name.length - b.name.length },
                { title: this.$t('Create') + this.$t('Time'), dataIndex: 'created', key: 'created', ellipsis: true },
                { title: this.$t('Status'), dataIndex: 'enabled', key: 'enabled', ellipsis: true, scopedSlots: { customRender: 'enabled' } }
            ],
            pagination: {
                defaultPageSize: 5,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['5', '10', '15', '20'],
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            fsdata: [
                //              {name:'data',time:'2019-08-07-12:25:12',status:'True'}
            ],
            selectedRowKeys: [],
            ids: 1,
            details: [],
            charts: [],
            loading: true,
            defaultSetting: { emptyText: <EmptyData /> },
            defaultActiveKey: 'FS_Overview',
            currentTabKey: 'FS_Overview',
            count: 0,
        }
    },
    computed: {
        getlanguage() {
            return this.$store.state.language
        }
    },
    watch: {
        flag(val) {
            this.getdata()
        },
        getlanguage(val) {
            this.fscolumns = [
                { title: this.$t('File') + this.$t('Name'), dataIndex: 'name', key: 'name', ellipsis: true, sorter: (a, b) => a.name.length - b.name.length },
                { title: this.$t('Create') + this.$t('Time'), dataIndex: 'created', key: 'created', ellipsis: true },
                { title: this.$t('Status'), dataIndex: 'enabled', key: 'enabled', ellipsis: true, scopedSlots: { customRender: 'enabled' } }
            ]
        }
    },
    created() {
        this.addListener('fsview') //通知交互：监听变化 刷新
        this.currentTabKey = localStorage.getItem('fs_current_tab') || 'FS_Overview'
        this.defaultActiveKey = localStorage.getItem('fs_current_tab') || 'FS_Overview'
    },
    inject: ['reload'],
    mounted() {
        this.getdata()
        this.getdetail()
        // this.getchart()
    },
    methods: {
        handleShare(item) {
            localStorage.setItem('fs_current_tab', "FS_Share");
            this.reload()
        },
        getdata() {
            this.loading = true
            request('get', 'cephfs/overview/fileSystem/').then(res => {
                // console.log('获取概况文件系统', res)
                this.fsdata = res.data
                this.loading = false
            })
        },
        getdetail() {
            // this.$axios.get(this.allurl+'cephfs/detail',{
            //     params: {
            //         id:this.ids
            //     }
            // }
            this.details = [];
            request('get', 'cephfs/overview/detail/').then(res => {
                // console.log('详细信息',res)
                this.details = res.data
                // if(this.details.pools){
                //     for(var i=0;i<this.details.pools.length;i++){
                //         this.details.pools[i].avail = this.bytesToSize(this.details.pools[i].avail)
                //     }
                // }
            })
        },
        getchart() {
            request('get', 'cephfs/counter', {
                // params: {
                id: this.ids
                // }
            }).then(res => {
                this.charts = res.data
            })
        },
        onSelectChange(selectedRowKeys) {
            let choose = selectedRowKeys.join('');
            for (const item of this.fsdata) {
                if (item.id == choose) {
                    this.ids = item.id
                }
            }
            // this.getdetail() 原来需要
            // this.getchart()
            this.selectedRowKeys = selectedRowKeys
        },
        //更新数据（文件系统存储池列表）
        updateData() {
            this.getdetail();
        },
        tabsChange(key) {
            this.currentTabKey = key;
            localStorage.setItem('fs_current_tab', key);
            let ref = `${key}Ref`
            if (key == 'FS_Overview') {
                this.getdata()
                this.getdetail()
            }
            else if (key == 'FS_Directory' || key == 'FS_Quota') {
                if (this.count !== 0) this.$nextTick(() => {
                    this.$refs[ref].file_path = ''
                    this.$refs[ref].getList('')
                })
                this.count++
            }
            else if (key == 'FS_User') {
                if (this.count !== 0) this.$nextTick(() => this.$refs[ref].$refs.userRef.getList())
                this.count++
            } else if (key == 'FS_Share') {
                this.$nextTick(() => {
                    // let key = this.$refs[ref].defaultActiveKey
                    // if (key == 'SMB') {
                    //     if (this.count !== 0) this.$nextTick(() => this.$refs[ref].$refs.SMBRef.getList())
                    //     this.count++
                    // }
                    // else if (key == 'NFS') {
                    //     if (this.count !== 0) this.$nextTick(() => this.$refs[ref].$refs.NFSRef.getList())
                    //     this.count++
                    // }
                })
            }
        },
    }
}
</script>

<style scoped>
::v-deep .ant-tabs-nav-scroll {
    margin-left: -8px;
}

::v-deep .ant-tabs-nav .ant-tabs-tab {
    margin-left: 8px;
}

::v-deep .ant-card-body {
    padding: 0 !important;
}

::v-deep .ant-tabs-bar {
    margin: 0;
}
</style>
